<template>
  <!-- 主业预审详情&主业计划审核详情 -->
  <div class="main-view-detail-comp page-container">
    <back-header></back-header>
    <div class="flex-auto overflow-y">
      <div class="full-height full-width no-scroll-x no-scroll-y flex-column">
        <data-list ref="dataList" :cacheParam="true" :dataConfig="dataConfig" :tableData="tableData"></data-list>
      </div>
    </div>
  </div>
</template>

<script>
import BackHeader from '@/components/business/page-comp/back-header/back-header.vue';
import DataList from '@/components/business/page-comp/data-list/data-list.vue';
import api from '../api/index.js';
export default {
  name: 'MainViewDetail',
  components: {
    BackHeader,
    DataList,
  },
  props: {
    detailUrl: {
      type: String,
      default() {
        return ''
      },
    },
    mainTaskId: {
      type: String,
      default() {
        return ''
      },
    },
  },
  data() {
    return {
      tableData: {
        data: [],
        total: 0
      },
      dataConfig: {},
    };
  },
  computed: {},
  beforeDestroy() { },
  created() {
    this.dataConfig = {
      search: {
        labelWidth: '120px',
        loading: false,
        form: {
          materialCode: '',
          preparedBy: '',
        },
        conditions: [
          {
            label: '需求物料编码',
            prop: 'materialCode',
            type: 'input',
          },
          {
            label: '编制人中文',
            prop: 'preparedBy',
            type: 'input',
          },
        ],
        searchCB: this.search,
        topOperates: []
      },
      table: {
        config: {
          select: false,
          selectCallback: () => { }
        },
        columns: [
          {
            label: '物资唯一编码(批次编码)',
            prop: 'sku',
            width: '180',
            type: 'text',
          },
          {
            label: '需求物料编码',
            prop: 'materialCode',
            type: 'text',
          },
          {
            label: '物料描述',
            prop: 'materialDesc',
            type: 'text',
            tooltip: true,
          },
          {
            label: '物料扩展编码',
            prop: 'materialExtendCode',
            type: 'text',
          },
          {
            label: '物料扩展描述',
            prop: 'materialExtendDesc',
            type: 'text',
            tooltip: true,
          },
          {
            label: '大类描述',
            prop: 'divisionDesc',
            type: 'text',
            tooltip: true,
          },
          {
            label: '中类描述',
            prop: 'groupDesc',
            type: 'text',
            tooltip: true,
          },
          {
            label: '小类描述',
            prop: 'classDesc',
            type: 'text',
            tooltip: true,
          },
          {
            label: '需求数量',
            prop: 'demandQuantity',
            type: 'text',
            align: 'center',
            width: '80',
          },
          {
            label: '单位',
            prop: 'unit',
            type: 'text',
            width: '60',
          },
          {
            label: '工程名称',
            prop: 'engineeringName',
            type: 'text',
            tooltip: true,
          },
          {
            label: '编制人中文',
            prop: 'preparedby',
            type: 'text',
            width: '100',
          },
          {
            label: '操作',
            prop: 'id',
            type: 'operates',
            fixed: 'right',
            width: '80',
            operates: [
              {
                label: '详情',
                type: 'link',
                callback: this.showDetail,
              },
            ]
          },
        ],
      }
    };
  },
  mounted() {
    this.$refs['dataList'].search();
  },
  methods: {
    showDetail(item = {}) {
      this.$router.push({ path: `${this.detailUrl}`, query: { id: item.id } });
    },
    search(pageInfo = {}, searchForm = {}) {
      this.dataConfig.search.loading = true;
      let params = {
        ...pageInfo,
        ...searchForm,
        mainTaskId: this.mainTaskId,
      };
      api.querySubTasks(params)
        .then((res) => {
          this.dataConfig.search.loading = false;
          if (res.success) {
            this.$log.debug('查询主业计划审核任务列表成功');
            const subTaskList = (res.data.subTaskList || []);
            subTaskList.forEach((item) => {
              item.dataWarning = !!(item.warnFields && item.warnFields.split(',').length);
            });
            this.tableData = { data: subTaskList, total: res.data.total };
          } else {
            this.$log.error('查询主业计划审核任务列表失败，错误信息为：', res.message);
            this.$message.error('查询主业计划审核任务列表失败：' + (res.message || ''));
          }
        })
        .catch((e) => {
          this.dataConfig.search.loading = false;
          this.$log.error('查询主业计划审核任务列表失败，错误信息为：', e);
        });
    },
  }
};
</script>

<style lang="scss" scoped>
.main-view-detail-comp {}
</style>
